import React from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from './store';
import { setAuthState } from './store/slices/userSlice';
import Navigation from './components/Navigation';

// Page components
import Home from './pages/Home';
import Discover from './pages/Discover';
import Messages from './pages/Messages';
import Profile from './pages/Profile';
import Create from './pages/Create';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import SettingsPage from './pages/SettingsPage';
import ProfileEditPage from './pages/ProfileEditPage';
import InterestTagsPage from './pages/InterestTagsPage';
import TestMessage from './TestMessage';
import CircleListPage from './pages/CircleListPage';
import CircleDetailPage from './pages/CircleDetailPage';

import { Layout, App as AntdApp } from 'antd';
import styled from 'styled-components';

// Styled components (can be moved to a separate file later if desired)
const { Header, Content } = Layout;

const StyledLayout = styled(Layout)`
  min-height: 100vh;
`;

const StyledHeader = styled(Header)`
  background: #fff;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: fixed;
  width: 100%;
  z-index: 1;
`;

const StyledContent = styled(Content) <{ $isAuthenticated: boolean }>`
  padding: 24px;
  margin: 0;
  min-height: 280px;
  margin-top: ${props => props.$isAuthenticated ? '64px' : '0'};
`;

function App() {
  const dispatch = useDispatch();

  // Check for token on app load
  React.useEffect(() => {
    const token = localStorage.getItem('userToken');
    if (token) {
      dispatch(setAuthState(true));
    }
  }, [dispatch]);

  return (
    <Provider store={store}>
      <Router>
        <AppContent /> {/* Render the new AppContent component */}
      </Router>
    </Provider>
  );
}

export default App;

// New component to handle layout and routing within the Router context
const AppContent: React.FC = () => {
  const { isAuthenticated } = useSelector((state: RootState) => state.user);
  const location = useLocation();

  // Determine if navigation should be shown
  // Hide navigation on specific routes like /circles, /login, /register, /settings, /profile/edit, /profile/tags
  const hiddenPaths = ['/circles', '/login', '/register', '/settings', '/profile/edit', '/profile/tags'];
  const showNavigation = isAuthenticated && !hiddenPaths.some(path => location.pathname.startsWith(path));

  return (
    <StyledLayout>
      {/* Render Header if authenticated */}
      {isAuthenticated && (
        <StyledHeader>
          {/* Header content here (e.g., logo, user info) */}
        </StyledHeader>
      )}

      <StyledContent $isAuthenticated={isAuthenticated}>
        <AntdApp> {/* AntdApp is now inside StyledContent */}
          <Routes> {/* Routes are now inside AntdApp */}
            {/* Public routes */}
            <Route path="/login" element={<LoginPage />} />
            <Route path="/register" element={<RegisterPage />} />
            <Route path="/test-message" element={<TestMessage />} />

            {/* Protected routes wrapped in conditional logic */}
            {isAuthenticated ? (
              <>
                <Route path="/" element={<Home />} />
                <Route path="/discover" element={<Discover />} />
                <Route path="/messages" element={<Messages />} />
                <Route path="/profile" element={<Profile />} />
                <Route path="/create" element={<Create />} />
                <Route path="/settings" element={<SettingsPage />} />
                <Route path="/profile/edit" element={<ProfileEditPage />} />
                <Route path="/profile/tags" element={<InterestTagsPage />} />
                {/* Circle routes */}
                <Route path="/circles" element={<CircleListPage />} />
                <Route path="/circles/:id" element={<CircleDetailPage />} />
              </>
            ) : (
              // Redirect to login if unauthenticated and trying to access protected routes
              <Route path="*" element={<LoginPage />} />
            )}
          </Routes>
        </AntdApp>
      </StyledContent>

      {/* Conditionally render navigation */}
      {showNavigation && <Navigation />}
    </StyledLayout>
  );
};
